<template>
    <div class="container">
        <div id="jump">
            <img src="http://127.0.0.1:3000/timg.gif" alt="">
            <h3 id="msg" class="my-3">5秒后自动跳转到首页</h3>
            <a id="btn" href="javascript:;">个人中心</a>
        </div>
    </div>
</template>
<script>
    (function(){
        //创建倒计时，每隔一秒递减1
        var s=5;
        var timer=setInterval(function(){
            s--;
            //数字递减到0，页面自动关闭
            if(s>0){
                msg.innerHTML=`${s}秒后自动跳转到首页`
            }else{
                this.$router.push("/index");
            }
        },1000);
        //按钮按下停止定时器
        btn.onclick=function(){
            clearInterval(timer);
            //跳转到个人中心页面
        }
    })();
export default {
    data(){
        return {}
    }
}
</script>
<style scoped>
#jump{
    width:1110px;height:400px;
    border:1px solid #ddd;
    border-top:30px solid #22abcc;
    border-radius: 3px;
    margin:10px 0px;
    text-align: center;
    padding:30px 0px;
}
#jump img{
    width:200px;
}
#jump a{
    color:#22abcc;
}
</style>

